<template>
  <my-wrapper fit title="注册界面">
    <div class="main-warp">
      <div class="form-warp">
        <my-form @submit="handleSubmit" size="small" label-width="80px" :rules="rules">
          <my-input name="userName" label="用户名"></my-input>
          <my-input name="name" label="姓名"></my-input>
          <my-input name="password" label="密码" :props="{type: 'password', showPassword: true}" ></my-input>
          <my-input name="passwordConfirm" label="确认密码" :props="{type: 'password', showPassword: true}" placeholder="确认密码"></my-input>
          <my-checkbox name="roleTypes" label="用户类型" :options="roleOpts" width="100%"></my-checkbox>
        </my-form>
      </div>
    </div>
  </my-wrapper>
</template>

<script>
import user from '$my/code/mixin/user'
import {encryptByDES} from '$ui/utils/crypto'
export default {
  mixins: [user],
  components: {},
  props: {
  },
  data() { 
    const pswVal = [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
    ]
    return { 
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        password: pswVal,
        passwordConfirm: pswVal,
        roleTypes: { required: true, message: '请选择用户类型', trigger: 'blur' }
      },
      roleOpts: [
        { label: '普通用户', value: '1' },
        { label: '高级用户', value: '2' }
      ] 
    }
  },
  computed: {
  },
  methods: {
    handleSubmit(model) {
      if (model.password !== model.passwordConfirm) {
        this.$alert('请确保密码正确')
        return
      }  
      const obj = {...model}
      obj.userName = encryptByDES(obj.userName, 'JOSEPH_CENTER')
      obj.password = encryptByDES(obj.password, 'JOSEPH_CENTER')
      delete obj.passwordConfirm 
      
      this.signin({data: obj}).then((res) => {
        if (!this.$access) return
        this.$access.login({
          ...res.userInfo,
          token: res.token
        })
        this.redirect()
      })
    }, 
    isSelf(url) {
      const {fullPath, path} = this.$route
      return url === fullPath || url === path || url === window.location.href
    },
    redirect() {
      const redirectUrl = this.$route.query[this.urlQueryName] || '/member'
      const path = decodeURIComponent(redirectUrl)
      // 如果准备要跳转的地址就是页面本身，不需要处理
      if (this.isSelf(path)) return
      const regex = /^http(s)?:\/\/.+/
      if (regex.test(path)) {
        window.location.href = path
      } else {
        this.$router.push(path)
      }
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
.main-warp{
  height:100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  .form-warp{
    width: 450px;
  }
}
</style>
 